<template>
	<view class="container">
		<view class="header">
			<view  class="header-item" v-if="isHeaderShow">
				<uni-row>
					<uni-col :span="12">
						<view class="header-item-view">
							<view class="title-text">运单号</view>
							<view class="title-line">|</view>
							<input type="text" 
								class="uni-input input search-input" 
								placeholder="运单号" 
								:value="searchData.waybill_sn"> 
						</view>
					</uni-col>
					<uni-col :span="12" v-if="getStatusTitleShow(1)">
						<view class="header-item-view" @click="statusShowClick(1)">
							<view class="title-text">运单状态</view>
							<view class="title-line">|</view>
							<input type="text" 
								class="uni-input input search-input" 
								placeholder="运单状态" 
								disabled="true" 
								:value="searchData.status_name"> 
							<uni-icons class="icon-image" type="bottom" size="14"></uni-icons>
						</view>
					</uni-col>
					<uni-col :span="12" v-if="getStatusTitleShow(1) == false">
						<view class="header-item-view">
							<view class="title-text">收货人</view>
							<view class="title-line">|</view>
							<input type="text" 
								class="uni-input input search-input" 
								placeholder="收货人" 
								:value="searchData.take_username">  
						</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="12">
						<view class="header-item-view">
							<view class="title-text">发货人</view>
							<view class="title-line">|</view>
							<input type="text" 
								class="uni-input input search-input" 
								placeholder="发货人" 
								:value="searchData.send_username">  
						</view>
					</uni-col>
					<uni-col :span="12">
						<view class="header-item-view">
							<view class="title-text">发货电话</view>
							<view class="title-line">|</view>
							<input type="text" 
								class="uni-input input search-input" 
								placeholder="发货电话" 
								:value="searchData.send_mobile">  
						</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="12" v-if="getStatusTitleShow(1)">
						<view class="header-item-view">
							<view class="title-text">收货人</view>
							<view class="title-line">|</view>
							<input type="text" 
								class="uni-input input search-input" 
								placeholder="收货人" 
								:value="searchData.take_username">  
						</view>
					</uni-col>
					<uni-col :span="12" v-if="getStatusTitleShow(1)">
						<view class="header-item-view">
							<view class="title-text">收货电话</view>
							<view class="title-line">|</view>
							<input type="text" 
								class="uni-input input search-input" 
								placeholder="收货电话" 
								:value="searchData.take_mobile">  
						</view>
					</uni-col>
				</uni-row>
				<uni-row v-if="getStatusTitleShow(2)">
					<uni-col :span="12" >
						<view class="header-item-view" @click="statusShowClick(1)">
							<view class="title-text">运单状态</view>
							<view class="title-line">|</view>
							<input type="text" 
								class="uni-input input search-input" 
								disabled="true" 
								:placeholder="getStatusTitle(1)" 
								:value="searchData.status_name"> 
							<uni-icons class="icon-image" type="bottom" size="14"></uni-icons>
						</view>
					</uni-col>
					<uni-col :span="12">
						<view class="header-item-view" @click="statusShowClick(2)">
							<view class="title-text">二级运单</view>
							<view class="title-line">|</view>
							<input type="text" 
								class="uni-input input search-input" 
								disabled="true" 
								placeholder="二级运单状态" 
								:value="searchData.status_p2_name" > 
							<uni-icons class="icon-image" type="bottom" size="14"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="12">
						<picker 
							style="width: 100%;" 
							@change="timeShowClick($event,1)" 
							mode="date">
							<view class="header-item-view" @click="timeShowClick(1)">
								<input type="text" 
									class="uni-input input search-input" 
									placeholder="开始时间" 
									disabled="true" 
									:value="searchData.createtime_start">  
								<view class="icon-text">起</view>
							</view>
						</picker>
					</uni-col>
					<uni-col :span="12">
						<picker
							style="width: 100%;" 
							@change="timeShowClick($event,2)" 
							mode="date">
							<view class="header-item-view">
								<input type="text" 
									class="uni-input input search-input" 
									placeholder="截止时间" 
									disabled="true" 
									:value="searchData.createtime_end">   
								<view class="icon-text">至</view>
							</view>
						</picker>
						
					</uni-col>
					<!-- <uni-col :span="24">
						<view class="header-item-view" @click="timeShowClick(2)">
							<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" /> 
						</view>
					</uni-col> -->
				</uni-row>
				
				<uni-row>
					<uni-col :span="12">
						 <button class="mini-btn" type="primary" size="mini" @click="queryClick">查询</button>
					</uni-col>
					<uni-col :span="12">
						 <button class="mini-btn" type="primary" size="mini" @click="resetClick">重置</button>
					</uni-col>
				</uni-row>
				
			</view>
			<view class="header-item-allow" @click="allowHeaderShow">
				<uni-icons v-if="isHeaderShow == false" type="top" size="20"></uni-icons>
				<uni-icons v-if="isHeaderShow == true" type="bottom" size="20"></uni-icons>
			</view>
		</view>

		<view class="content" style="margin-top: 0rpx;">
			<mescroll-uni :ref="'mescrollRef' + i" @init="mescrollInit" height="100%" :top="listTop" :down="downOption"
				@down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
				<!-- 数据列表 -->
				<view class="goods-list single-column">
					<view class="goods-item margin-bottom" v-for="(item, index) in orderList" :key="index">
						<u-card>
							<view class="item-box">
								<view @click="toDetail(item)">
									<view style="padding-top: 16rpx;">
										<u-row gutter="0">
											<u-col span="12">
												<view
													style="display: flex;flex-direction: row;justify-content: space-between;">
													<view>
														<text class="name"
															style="font-weight: bold;">订单号:{{ item.waybill_sn }}</text>

													</view>
													<view>
														<!-- <text class="name">运单等级：</text> -->
														<!-- <text class="value">{{ getLevel(item)}}</text> -->
														<text class="value" style="margin-right: 16rpx;">
															{{ waybillStatus(item) }}</text>
													</view>
												</view>

											</u-col>
										</u-row>
									</view>
									<view class="bottom-line">
										<view class="line"></view>
									</view>
									<view class="type-box">
										<u-row gutter="0">
											<u-col span="3">
												<view class="good-item"> <text class="name">货物名称</text></view>
											</u-col>
											<u-col span="2">
												<view class="good-item"> <text class="name">包装</text></view>
											</u-col>
											<u-col span="2">
												<view class="good-item"> <text class="name">数量</text></view>
											</u-col>
											<u-col span="2">
												<view class="good-item"> <text class="name">总(KG)</text></view>
											</u-col>
											<u-col span="2">
												<view class="good-item"> <text class="name">总(方)</text></view>
											</u-col>
										</u-row>
										<u-row gutter="0" v-for="(goodItem ,row) in item.goods" :key="row">
											<u-col span="3">
												<text class="value">{{ goodItem.goods_name }}</text>
											</u-col>
											<u-col span="2">
												<text class="value">{{ goodItem.goods_pack }}</text>
											</u-col>
											<u-col span="2">
												<text class="value">{{ goodItem.goods_nums }}</text>
											</u-col>
											<u-col span="2">
												<text class="value"> {{ goodItem.total_weight }}</text>
											</u-col>
											<u-col span="2">
												<text class="value">{{ goodItem.total_volume }}</text>
											</u-col>
										</u-row>
										<u-row gutter="0">
											<u-col span="6">
												<view class="item-flex-row">
													<text class="name">运单等级：</text>
													<text class="value">{{ getLevel(item)}}</text>
												</view>

											</u-col>
											<u-col span="6">
												<view class="item-flex-row">
													<text class="name">目的城市：</text>
													<text class="value">{{ getDestinationCity(item) }}</text>
												</view>
											</u-col>
										</u-row>
										<u-row gutter="0">
											<u-col span="6">
												<text class="name">二级发货凭证：{{ getDepartPic2(item) }}</text>
											</u-col>
											<u-col span="6">
												<text class="name">一级到货凭证：{{ getArrivePic1(item) }}</text>
											</u-col>
										</u-row>
										<u-row gutter="0">
											<u-col span="6">
												<text class="name">一级发货凭证：{{ getDepartPic1(item) }}</text>
											</u-col>
											<u-col span="6">
												<text class="name">分拨中心到货凭证：{{ getAllocatePic1(item) }}</text>
											</u-col>
										</u-row>
										<u-row gutter="0">
											<u-col span="12">
												<text class="name">分拨凭证：{{ getAllocatePic2(item) }}</text>
											</u-col>

										</u-row>
										<u-row gutter="0">
											<u-col span="12">
												<text class="name">备注：{{ item.remark }}</text>
											</u-col>
										</u-row>
									</view>
								</view>
								<view class="btns-box">
									<view class="pay" v-if="showDepartBtn(item)" @click="carLoading(item)">发货凭证
									</view>
									<view class="pay" v-if="showDeliveryBtn()" @click="carLoading(item)">到货凭证</view>
									<view class="pay" v-if="showAllocationBtn(item)" @click="carLoading(item)">分拨凭证
									</view>
									<view class="cancel" v-if="getDisabledEdit(item)" @click="toEdit(item)">编辑
									</view>
									<view class="del" v-if="getDisabledDel(item)" @click="toDel(item)">删除
									</view>
									<view class="del" @click="printTitle(item)">打印标签
									</view>
									<view class="del" @click="printOrder(item)">打印运单
									</view>
								</view> 
							</view>
						</u-card>
					</view>
				</view>
				<!-- <view v-if="orderList.length == 0 && emptyShow"><ns-empty text="暂无订单" :isIndex="false" :emptyType="emptyType"></ns-empty></view> -->

				<loading-cover ref="loadingCover"></loading-cover>
			</mescroll-uni>
			<u-picker :show="statusShow1" :columns="statusOptions" @close="statusClose" @cancel="statusClose"
				@confirm="statusConfirm">
			</u-picker>

			<u-picker :show="statusShow2" :columns="status2Options" @close="statusClose" @cancel="statusClose"
				@confirm="statusConfirm2">
			</u-picker>
			
			<!-- <u-picker :show="timeShow" @close="statusClose" @cancel="statusClose"
				@confirm="statusConfirm2">
			</u-picker> -->
		</view>
	</view>

</template>

<script>
	import listitem from '../public/js/list.js';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js';

	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin, listitem], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {

			};
		},
		methods: {

		}
	};
</script>

<style lang="scss">
	@import '../public/css/list.scss';
</style>